<template>
  <div app-container>
    <el-row type="flex" justify="center">
      <el-col :span="21">
        <!-- <div align="center" style="background-color: lightgray;height: 60px;">
          <div>
            <span id="mainTitle">借款审核</span>
          </div>
        </div> -->
      </el-col>
    </el-row>
    <el-row class="mb8" justify="center" type="flex">
      <el-col :span="20">
        <el-descriptions
          title="审核状态"
          name="1"
          size="medium"
          :column="3"
          class="con"
        >
          <template slot="title">
            <p class="title">客户信息</p>
          </template>
          <el-descriptions-item label="客户姓名">
            <span v-text="info.clientName" />
          </el-descriptions-item>
          <el-descriptions-item label="手机号码">
            <span v-text="info.phone" />
          </el-descriptions-item>
          <el-descriptions-item label="客户身份证号">
            <span v-text="info.citizenIdentity" />
          </el-descriptions-item>
          <el-descriptions-item label="客户贷款状态">
            <dict-tag :options="dict.type.loan_status" :value="info.loanStatus" />
          </el-descriptions-item>
          <el-descriptions-item label="累计放款">
            <span v-text="info.loansTotal" />
          </el-descriptions-item>
          <el-descriptions-item label="客户备注">
            <span v-text="info.remark" />
          </el-descriptions-item>
        </el-descriptions>
        <hr />
      </el-col>
    </el-row>

    <el-row class="mb8" justify="center" type="flex">
      <el-col :span="20">
        <div v-for="(one, index) in allData" :key="index">
          <el-descriptions
            v-if="one.title == '个人信息' || one.title == '联系人信息'"
            :title="one.title"
            name="1"
            size="medium"
            :column="3"
            class="con"
          >
            <template slot="title">
              <p class="title">{{ one.title }}</p>
            </template>
            <el-descriptions-item
              v-for="(oneone, index1) in one.viewDetails"
              :key="index1"
              :label="oneone.fieldName"
            >
              <div v-if="oneone.fieldType != 'pictrue'">
                <span v-text="oneone.value" />
              </div>
              <div v-else-if="oneone.fieldType == 'pictrue'">
                <el-image
                  style="width: 160px; height: 90px"
                  :src="
                    require('@/views/production/collaborativeProduct/1561390725417.jpeg')
                  "
                />
              </div>
            </el-descriptions-item>
          </el-descriptions>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { findOne, find } from "@/api/client";
import { newViewDetails } from "@/api/viewDetails";

export default {
  name: "client",
  dicts: ['loan_status','client_status'],
  data() {
    return {
      loading: true,
      open: false,
      title: "",
      form: [],
      info: [],
      id: undefined,
      allData: [
        {
          title: "",
          data: [],
        },
      ],
      activeNames: ["1"],
    };
  },
  created() {
    this.id = this.$route.params && this.$route.params.id;
    this.getList(this.id);
  },
  methods: {
    getList(id) {
      newViewDetails(id)
        .then((res) => {
          this.allData = res.data;
        })
        .catch();

        findOne(id)
            .then((res) => {
              this.info = res.data;
            })
            .catch();
    },

    firstTrial() {
      this.reset();
      this.open = true;
      this.title = "进行初审";
    },
    cancel() {
      this.open = false;
      this.reset();
    },
    reset() {
      this.form = {
        clientId: undefined,
        auditResult: undefined,
        auditIdea: undefined,
        status: "0",
      };
      this.resetForm("form");
    },
    handleChange(val) {
      console.log(val);
      console.log(this.allData);
    },
    submitForm: function () {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          this.form.id = this.$route.params && this.$route.params.id;
          console.log(this.form);
          if (this.form.clientId !== undefined) {
            UpdateFirstTrial(this.form).then((response) => {
              this.$modal.msgSuccess("成功");
              console.log("hhhhhhh");
              this.open = false;
              this.getList(this.clientId);
            });
          }
        }
      });
    },
  },
};
</script>
<style>
body > .el-container {
  margin-bottom: 40px;
  display: inline-block;
}

#mainTitle {
  font-size: 30px;
  font-family: Microsoft YaHei;
  font-weight: bold;
  float: left;
  height: 60px;
  margin-top: 10px;
}

/* 调整整个名字和输入框占的盒子大小 */
#context {
  float: left;
  /* width: 20%;  */
  margin-left: 50px;
}

.long {
  width: 1050px;
  margin-left: 50px;
}

.short {
  float: left;
  /* width: 450px; */
  margin-left: 50px;
}

.title {
  font-size: 30px;
  font-family: Microsoft YaHei;
  font-weight: bold;
  color: #303133;
}
.secondTitle {
  font-size: 20px;
  font-family: Microsoft YaHei;
  font-weight: bolder;
  color: #303133;
  background-color: aqua;
  height: 35px;
}
.con {
  font-size: 20px;
  font-family: Microsoft YaHei;
  font-weight: bolder;
  color: #303133;
}
</style>
